<template>
	<zui-box types="2">
		<!-- 头部导航 -->
		<zui-navbar title="忘记密码" bg="transparent"></zui-navbar>

		<view style="height:150rpx"><!--占地高度 --></view>

		<view class="zui-form">
			<view class="zui_input">
				<u-input
					v-model="account"
					shape="circle"
					:prefixIcon="require('@/static/img/input_icon03.png')"
					placeholder="手机号"
					border="none"
					color="#fff"
					clearable
					type="number"
					maxlength="11"
				></u-input>
			</view>
			<view class="zui_input">
				<u-input v-model="code" shape="circle" :prefixIcon="require('@/static/img/input_icon04.png')" placeholder="短信验证码" border="none" color="#fff" clearable>
					<template slot="suffix">
						<zui-code type="1" :mobile="account" scene="forget_login"></zui-code>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
				v-show="!is_password"
					v-model="password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="密码"
					border="none"
					clearable
					color="#fff"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_password" @click="is_password = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_password" @click="is_password = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_password"
					v-model="password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="密码"
					border="none"
					clearable
					color="#fff"
					:password="is_password"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_password" @click="is_password = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_password" @click="is_password = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
					v-show="!is_passworda"
					v-model="confirm_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认密码"
					border="none"
					clearable
					color="#fff"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passworda" @click="is_passworda = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passworda" @click="is_passworda = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_passworda"
					v-model="confirm_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认密码"
					border="none"
					clearable
					color="#fff"
					:password="is_passworda"
					:readonly="!account"
				>
					<template slot="suffix"> 
						<u-icon v-if="is_passworda" @click="is_passworda = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passworda" @click="is_passworda = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
		</view>

		<view style="height:78rpx"><!--占地高度 --></view>

		<zui-button @fun="save">确认</zui-button>
		<view class="link_btn"><view class="text" @click="xz_back()">登录</view></view>
	</zui-box>
</template>
<script>
export default {
	data() {
		return {
			account: '', //账号
			code: '',
			password: '', //密码
			confirm_password: '', //密码

			is_password: true, //是否是密码
			is_passworda: true, //是否是密码
		};
	},
	onLoad: function() {},
	methods: {
		save() {
			if (!this.account) {
				return this.say('请输入账号');
			}
			if (!this.code) {
				return this.say('请输入短信验证码');
			}
			if (!this.password) {
				return this.say('请输入密码');
			}
			if (!this.confirm_password) {
				return this.say('请输入确认密码');
			}
			if (this.password != this.confirm_password) {
				return this.say('两次密码输入不一样');
			}

			uni.showLoading({
				title: '注册中...'
			});

			uni.$u.http
				.post(
					'/app/login/forgetLoginPassword',
					{
						mobile: this.account,
						sms_code: this.code,
						password: this.password,
						confirm_password: this.confirm_password
					},
					{
						custom: {
							auth: false,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.reLaunch({
							url:'./login'
						})
					}, 1200);
				})
				.catch(err => {
					uni.hideLoading();
					console.log('处理', err);
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.zui-form {
	padding: 0 60rpx;

	.zui_input {
		box-sizing: border-box;
		padding: 0 0 0 20rpx;
		border-radius: 104rpx;
		// width: 622rpx;
		background: #3a3050;
		height: 104rpx;
		margin-bottom: 20rpx;

		/deep/.u-input__content__field-wrapper__field {
			// background: red !important;
			height: 104rpx !important;
		}

		/deep/.u-icon__img {
			padding: 24rpx !important;
		}

		/deep/.u-input__content__prefix-icon {
			margin-left: 0 !important;
		}

		/deep/.u-input__content__subfix-icon {
			.u-icon__img {
				margin-right: 20rpx !important;
			}
		}
	}
}

.zui-check {
	display: flex;
	align-items: center;
	padding: 30rpx;

	.text {
		padding: 0 12rpx;
		line-height: 2;
	}
}

.text_button_box {
	font-size: 30rpx;
	color: #9d97a7;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.link {
		padding: 30rpx;
	}
}

//链接按钮
.link_btn {
	display: flex;
	justify-content: center;

	.text {
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #9d97a7;
		padding: 30rpx;
		display: inline-block;
	}
}
</style>
